<template>
    <div class="bobxxxssw">
        <!-- 下面第一个图表 -->
        <div id="maindddww"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
    components: {},
    data() {
        return {
            geSheBelZaiXianFuQiuData: [
                { value: 10, title: '拒绝', color: '#008484'},
                { value: 35, title: '考虑中', color: '#008484' },
                { value: 655, title: '通过', color: '#008484' },
                { value: 700, title: '申请', color: '#008484' }

            ],
        };
    },
    created() {
        // this.getDataList();
    },
    mounted() {
        // this.initCharts();
    },
    methods: {
        // 请求接口，获取数据
        // getDataList() {
        //     this.geSheBelZaiXianFuQiuData = [];
        //     axios({
        //         method: "get",
        //         url: "/api/dataset/1675755162119278593",
        //         headers: {
        //             apiKey: "a92a7db58b234595951bb2b39fcf6430",
        //         },
        //     }).then((res) => {
        //         res.data.data.forEach((element) => {
        //             this.geSheBelZaiXianFuQiuData.push({
        //                 value: element.value,
        //                 title: element.title,
        //                 color: element.color
        //             });
        //         });
        //         this.loading = false;
        //         console.log(res, "设备统计数据");
        //         this.initCharts();
        //     });
        // },
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("maindddww"));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });

            // 数据处理
            const titles = this.geSheBelZaiXianFuQiuData.map(item => item.title);
            const values = this.geSheBelZaiXianFuQiuData.map(item => item.value);

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    show: true,
                    formatter: "{b}: {c}"
                },
                grid: {
                    left: '5%',
                    top: '12%',
                    right: '1%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                        alignWithLabel: false,
                        length: 5,
                    },
                    splitLine: {
                        show: false
                    },
                    inverse: true, // 排序
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    axisLabel: {
                        interval: 0, // 横轴信息全部显示
                        rotate: 30, // -15度角倾斜显示
                    },
                    data: titles // 使用标题作为 X 轴数据
                },
                yAxis: [{
                    type: 'value',
                    show: true,
                    position: 'top',
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}' // Y 轴刻度值
                    }
                }],
                series: [{
                    name: '设备统计数据',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: {
                                color: 'white' // 数值颜色
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: 8,
                            color: function (params) {
                                const colors = [ '#FF4500' , '#FFA500','#00BFFF','#008484'];
                                return colors[params.dataIndex % colors.length];
                            },
                        },
                    },
                    barGap: '0%',
                    barCategoryGap: '50%',
                    data: values // 使用值作为 Y 轴数据
                }]
            };

            myChart.setOption(option);
        },
    },
};
</script>

<style>
#maindddww {
    height: 300px;
    /* width: 580px; */
    box-sizing: border-box;
    padding: 5px;
}

.bobxxxssw {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
}
</style>